<template>
  <div>
    <div class="mb-3">
      <el-button
        v-if="customerData.project_status === '0' || customerData.project_status === '2'"
        type="primary"
        @click="edit()"
      >
        增加部门
      </el-button>
    </div>
    <el-table border :data="tableData">
      <el-table-column align="center" label="部门名称" prop="dept_name">
        <template slot-scope="scope">
          <span>{{ scope.row.dept_name || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="部门级别" prop="dept_lever">
        <template slot-scope="scope">
          <span>{{ scope.row.dept_lever || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="备注" prop="remark">
        <template slot-scope="scope">
          <span>{{ scope.row.remark || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="customerData.project_status === '0' || customerData.project_status === '2'"
        align="center"
        label="操作"
        width="120px"
      >
        <template slot-scope="scope">
          <el-button class="py-0 px-1" type="text" @click="edit(scope.row)">
            <i class="fa fa-edit"></i>
          </el-button>
          <el-button class="py-0 px-1 text-danger" type="text" @click="deleteData(scope.row)">
            <i class="fa fa-trash"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <form-component
      ref="fc"
      :auto-init="false"
      :form-data="formData"
      :formAppend="{}"
      :table-data="editData"
      :table-id="tableId"
      :table-name="tableName"
      :visible.sync="editVisible"
      @success="getData"
    ></form-component>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import FormComponent from '@/components/FormComponent'
import SelectCustomerDept from '@/credit/components/select/SelectCustomerDept'

export default {
  components: {
    FormComponent,
  },
  props: {},
  data() {
    return {
      tableData: [],
      editVisible: false,
      tableName: 'datum_customer_dept',
      formData: {
        dept_name: { type: 'text', value: '', required: true, label: '部门名称' },
        dept_lever: { type: 'number', value: '', label: '部门级别', hide: true },
        parent_dept_id: {
          type: 'component',
          value: '',
          label: '上级部门',
          component: SelectCustomerDept,
          attrs: {
            class: 'form-control-ml w-100',
          },
          on: {
            changes: (v, item) => {
              const lever = item.dept_lever || 0
              this.$refs.fc.setKey('dept_lever', 'value', Number(lever) + 1)
            },
          },
        },
        remark: { type: 'text', value: '', label: '备注' },
      },
      editData: {},
      id: '',
      tableId: '',
    }
  },
  computed: {
    ...mapGetters(['customerDeptTree']),
  },
  watch: {},
  created() {
    this.customerData = JSON.parse(sessionStorage.getItem('customer_related_view'))
    this.id = this.$route.query.id || sessionStorage.getItem('customer_related_id')
    this.getData()
  },
  mounted() {},
  methods: {
    edit(p) {
      this.editVisible = true
      this.tableId = p ? p.datum_customer_dept_id : ''
      this.editData = p
    },
    getData() {
      this.$store.dispatch('getCustomerDept', this.id).then(res => {
        this.tableData = res
      })
      // this.$api.getData('credit', this.tableName, { 'customer_related_id.eq': this.id }).then(res => {
      //   this.tableData = res.data
      // })
    },
    deleteData(item) {
      const h = this.$createElement
      this.$msgbox({
        title: '提示',
        message: h('span', undefined, `确定删除？`),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: async (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '删除中...'
            const res = await this.$utils.promise(
              this.$api.deleteData('credit', this.tableName, item.datum_customer_dept_id)
            )
            instance.confirmButtonLoading = false
            instance.confirmButtonText = '确定'
            if (res) {
              this.$message.success('删除成功！')
              this.getData()
              done()
            } else {
              this.$message.error('删除失败，请重试！')
            }
          } else {
            done()
          }
        },
      }).catch(() => {})
    },
  },
}
</script>
<style scoped></style>
